<template>
  <view class="containera">
    <!-- 区域筛选 -->
    <view class="area-filter">
      <view class="filter-item" :class="{ active: currentAreaId === null }" @click="handleAreaChange(null)">
        全部
      </view>
      <view class="filter-item" v-for="area in areaList" :key="area.areaId"
        :class="{ active: currentAreaId === area.areaId }" @click="handleAreaChange(area.areaId)">
        {{ area.areaName }}
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#666"></uni-icons>
        <input type="text" v-model="searchValue" placeholder="搜索景点" @confirm="handleSearch" confirm-type="search" />
        <view class="search-btn" @click="handleSearch" v-if="searchValue">搜索</view>
        <view class="search-btn" @click="handleClear" v-if="searchValue">清除</view>
      </view>
    </view>

    <!-- 景点列表 -->
    <view class="spot-list">
      <view class="spot-item" v-for="spot in spotList" :key="spot.spotId" @click="goToDetail(spot.spotId)">
        <view class="spot-image">
          <image :src="IMAGE_BASE + spot.image" mode="aspectFill"></image>
        </view>
        <view class="spot-info">
          <view class="spot-name">{{ spot.spotName }}</view>
          <view class="spot-desc">{{ spot.description }}</view>
          <view class="spot-extra">
            <view class="spot-address">
              <uni-icons type="location" size="14" color="#666"></uni-icons>
              <text>{{ spot.address }}</text>
            </view>
            <view class="spot-time">
              <uni-icons type="calendar" size="14" color="#666"></uni-icons>
              <text>{{ spot.openTime }}</text>
            </view>
          </view>
          <view class="spot-bottom">
            <view class="spot-price">
              <text class="price">¥{{ spot.ticketPrice }}</text>
              <text class="label">起</text>
            </view>
            <button class="buy-btn" size="mini" @click.stop="goToDetail(spot.spotId)">查看详情</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="spotList.length === 0">
      <image src="/static/images/empty.png" mode="aspectFit"></image>
      <text>暂无景点信息</text>
    </view>
  </view>
</template>

<script>
import { getSpotList } from '@/api/spots.js'
import { getAreaList } from '@/api/area.js'
import config from '../../api/config.js'

const IMAGE_BASE = config.image_base

export default {
  data () {
    return {
      spotList: [],
      searchValue: '',
      IMAGE_BASE,
      loading: false,
      areaList: [],
      currentAreaId: null
    }
  },
  onLoad () {
    this.getAreas()
    this.getSpots()
  },
  methods: {
    // 获取区域列表
    getAreas () {
      getAreaList().then(res => {
        if (res.code === 200) {
          this.areaList = res.data
        }
      })
    },
    // 处理区域切换
    handleAreaChange (areaId) {
      this.currentAreaId = areaId
      this.getSpots()
    },
    // 获取景点列表
    getSpots () {
      this.loading = true
      const params = {
        name: this.searchValue,
        areaId: this.currentAreaId
      }
      getSpotList(params).then(res => {
        if (res.code === 200) {
          this.spotList = res.data
        }
        this.loading = false
      })
    },
    // 搜索处理
    handleSearch () {


      this.loading = true
      searchSpots(this.searchValue).then(res => {
        if (res.code === 200) {
          this.spotList = res.data
          if (this.spotList.length === 0) {
            uni.showToast({
              title: '未找到相关景点',
              icon: 'none'
            })
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 清除搜索
    handleClear () {
      this.searchValue = ''
      this.getSpots()
    },
    // 跳转到详情页
    goToDetail (spotId) {
      uni.navigateTo({
        url: `/pages/spots/detail?id=${spotId}`
      })
    },
    // 购买处理
    handleBuy (spot) {
      uni.navigateTo({
        url: `/pages/spots/order?id=${spot.spotId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.containera {
  padding: 20rpx;
  min-height: 100vh;
  background: #f5f6fa;
}

.search-box {
  padding: 20rpx 0;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #f5f6fa;

  .search-input {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 16rpx 30rpx;
    border-radius: 40rpx;

    input {
      flex: 1;
      margin-left: 20rpx;
      font-size: 28rpx;
    }

    .search-btn {
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #666;
      border-left: 1px solid #eee;
      margin-left: 20rpx;

      &:active {
        opacity: 0.7;
      }
    }
  }
}

.spot-list {
  .spot-item {
    display: flex;
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
  }

  .spot-image {
    width: 200rpx;
    height: 200rpx;
    margin-right: 20rpx;
    border-radius: 12rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .spot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .spot-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .spot-desc {
    font-size: 26rpx;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10rpx;
  }

  .spot-extra {
    font-size: 24rpx;
    color: #666;

    .spot-address,
    .spot-time {
      display: flex;
      align-items: center;
      margin-bottom: 6rpx;

      text {
        margin-left: 6rpx;
      }
    }
  }

  .spot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10rpx;
  }

  .spot-price {
    .price {
      font-size: 36rpx;
      color: #f56c6c;
      font-weight: bold;
    }

    .label {
      font-size: 24rpx;
      color: #999;
      margin-left: 4rpx;
    }
  }

  .buy-btn {
    background: #f56c6c;
    color: #fff;
    border: none;
    font-size: 24rpx;

    &:after {
      border: none;
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}

.area-filter {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  background: #fff;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  white-space: nowrap;

  &::-webkit-scrollbar {
    display: none;
  }

  .filter-item {
    padding: 10rpx 30rpx;
    margin-right: 20rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #666;
    background: #f5f5f5;

    &.active {
      background: #f56c6c;
      color: #fff;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>